<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>流星雨特效</canvas></title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<style>
			*{margin: 0; padding: 0;}
			#canvas
			{
				background: #000;
				display: block;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas">您的浏览器版本过低，请更换浏览器！</canvas>
		<script>
			var can=document.getElementById('canvas');
			var ctx=can.getContext('2d');
			var w=can.width=window.innerWidth;
			var h=can.height=window.innerHeight;
			
			var count=30;
			var drops=[];
			window.onresize=function()
			{
				w=can.width=window.innerWidth;
			    h=can.height=window.innerHeight;
			};
			function Drop(){};
			Drop.prototype={
				init: function()
				{
					this.x=random(0,w);
					this.y=0;
					this.r=1;
					this.color='#0ff';
					this.vy=random(4,5);
					this.vr=1;
					this.a=1;
					this.va=0.96;
					this.l=random(h*0.8,h*0.9);
				},
				draw: function()
				{
					if(this.y>this.l)
					{
						ctx.beginPath();
						ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false);
						ctx.strokeStyle='rgba(0,255,255,'+this.a+')';
						ctx.stroke();
					}
					else
					{
						ctx.fillStyle=color(this.a);
						ctx.fillRect(this.x,this.y,2,10);
					}
					this.update();
				},
				update: function()
				{
					if(this.y<this.l)
					{
						this.y+=this.vy;
					}
					else
					{
						if(this.a>0.03)
						{
							this.r+=this.vr;
							if(this.r>50)
							{
								this.a*=this.va;
							}
						}
						else
						{
							this.init();
						}
					}
				}
			}
			function move()
			{
				ctx.fillStyle='rgba(0,0,0,.1)';
				ctx.fillRect(0,0,w,h);
				for(var i=0;i<drops.length;i++)
				{
					drops[i].draw();
				}
				requestAnimationFrame(move);//调用经动画，递归,请求动画帧
			};
			function setup()
			{
				for(var i=0;i<count;i++)
				{
					(function(j)
					{
						setTimeout(function()
						{
							var drop=new Drop();
							drop.init();
							drops.push(drop);
						},j*200);
					}(i))//i为传入参数，代替j
				}
			};
			function random(min,max)
			{
				return Math.random()*(max-min)+min;
			};
			function color(a)
			{
				var r=Math.floor(Math.random()*255);//random()方法可返回介于 0~1 之间的一个随机数
				var g=Math.floor(Math.random()*255);
				var b=Math.floor(Math.random()*255);
				return 'rgba('+r+','+g+','+b+','+a+')';
			};
			setup();
			move();
		</script>
	</body>
</html>